import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './mine.scss'
import axios from '../../http/axios'
import storage from '../../utils/storage'
import '@nutui/nutui-react/dist/style.css'
import { Switch } from '@nutui/nutui-react'
import socket from '../../socket'
import {
    RightOutline, GiftOutline,
    ClockCircleOutline, EnvironmentOutline, QuestionCircleOutline, SetOutline, EyeOutline
} from 'antd-mobile-icons'
export default function Mine() {
    let selfInfo = storage.get('selfInfo')
    let userId = sessionStorage.getItem('user_id')
   
    useEffect(() => {
    
    }, [])
    let nav = useNavigate()
    const [ishow] = useState(true)
    return (
        <div className='box'>
            <div style={{ width: '100%' }}>
                {
                    ishow ? <img src="https://www.pabzibo.live:3001/upload/beijing.png" alt="" style={{ height: '180px', width: '100%' }} /> :
                        <img src="https://www.pabzibo.live:3001/upload/heitian.png" alt="" style={{ height: '180px', width: '100%' }} />
                }
            </div>
            <div className='box2'>
                <div className='box2_1'>
                    <h3 style={{ marginTop: '30px', marginLeft: '20px', color: 'white' }} className='wode'>我的</h3>
                </div>
                <div className='box2_2'>



                    <div className='box2_2_1' >
                        <div>
                            <img src={selfInfo.avatar} alt=""
                                style={{ width: '65px', height: '65px', borderRadius: '50%', marginLeft: '10px', marginTop: '20px' }}
                            />
                        </div>
                        <div>
                            <h3 className='h'>{selfInfo.res}</h3>
                            <span className='hs'>ID:{userId.slice(0, 6)}</span>
                            <div style={{ color: 'white', 'display': 'flex', marginTop: '-10px' }}>
                                <div style={{ marginLeft: '10px', marginTop: '10px' }}>
                                    <span className='ll'>3</span><span className='fensi'>粉丝</span>
                                </div>
                                <div style={{ marginLeft: '15px', marginTop: '10px' }}>
                                    <span className='ll'>3</span><span className='fensi'>关注</span>
                                </div>
                                <div style={{ marginLeft: '15px', marginTop: '10px' }}>
                                    <span className='ll'>3</span><span className='fensi'>喜欢</span>
                                </div>
                                <RightOutline className='tb' />

                            </div>

                        </div>
                    </div>




                </div>

            </div>
            <div className={ishow ? 'box3' : 'box33'}>
                <div className='box3_1'>
                    <div>
                        <img src="https://www.pabzibo.live:3001/upload/tubiao.png" alt=""
                            style={{ width: '50px', height: '40px', borderRadius: '50%', marginLeft: '10px', marginTop: '10px' }}
                        />
                        <h4 style={{ marginLeft: '8px', fontSize: '13px' }} className={ishow ? '' : 'ziti'}>作者入驻</h4>
                    </div>
                    <div>
                        <img src="https://www.pabzibo.live:3001/upload/huati.png" alt=""
                            style={{ width: '40px', height: '40px', borderRadius: '50%', marginLeft: '10px', marginTop: '10px' }}
                        />
                        <h4 style={{ fontSize: '13px', marginLeft: '4px' }} className={ishow ? '' : 'ziti'}>话题活动</h4>
                    </div>
                    <div onClick={() => { nav('/chattinglist') }}>
                        <img src="https://www.pabzibo.live:3001/upload/laba.png" alt=""
                            style={{ width: '50px', height: '40px', borderRadius: '50%', marginLeft: '10px', marginTop: '10px' }}
                        />
                        <h4 style={{ marginLeft: '8px', fontSize: '13px' }} className={ishow ? '' : 'ziti'} >消息中心</h4>
                    </div>
                </div>
                <div className={ishow ? 'box3_2' : 'box3_22'}>
                    <GiftOutline style={{ fontSize: '25px', marginLeft: '10px', marginTop: '10px' }} className={ishow ? '' : 'bai'} />
                    <p className={ishow ? 'jkl' : 'kl'}>邀请有奖</p>
                </div>
                <div className={ishow ? 'box3_2' : 'box3_22'}>
                    <ClockCircleOutline style={{ fontSize: '25px', marginLeft: '10px', marginTop: '10px' }} className={ishow ? '' : 'bai'} />
                    <p className={ishow ? 'jkl' : 'kl'}>观看记录</p>
                </div>
                <div className={ishow ? 'box3_2' : 'box3_22'} onClick={() => nav('/map')}>
                    <EnvironmentOutline style={{ fontSize: '25px', marginLeft: '10px', marginTop: '10px' }} className={ishow ? '' : 'bai'} />
                    <p className={ishow ? 'jkl' : 'kl'}>收货地址</p>
                </div>
                <div className={ishow ? 'box3_2' : 'box3_22'}>
                    <QuestionCircleOutline style={{ fontSize: '25px', marginLeft: '10px', marginTop: '10px' }} className={ishow ? '' : 'bai'} />
                    <p className={ishow ? 'jkl' : 'kl'}>意见反馈</p>
                </div>
                <div className={ishow ? 'box3_2' : 'box3_22'}>
                    <SetOutline style={{ fontSize: '25px', marginLeft: '10px', marginTop: '10px' }} className={ishow ? '' : 'bai'} />
                    <p className={ishow ? 'jkl' : 'kl'}>设置</p>
                </div>
                <div className={ishow ? 'box3_2' : 'box3_22'}>
                    <EyeOutline style={{ fontSize: '25px', marginLeft: '10px', marginTop: '10px' }} className={ishow ? '' : 'bai'} />
                    <p className={ishow ? 'jkl' : 'kl'}>深色模式</p>
                    <Switch
                        // onChange={e => shenbai(e)}
                        className='anniu'
                        defaultChecked
                        style={{
                            '--nutui-switch-open-background-color': 'black',
                            '--nutui-switch-close-line-background-color': '#ebebeb',
                        }}
                    />
                </div>
            </div>
        </div>
    )
}
